<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>axios练习</h1>
  <button id="getBtn">get请求</button>
  <button id="postBtn">post请求</button>
  <button id="putBtn">put请求</button>
  <button id="deleteBtn">delete请求</button>

  <script>
    const getBtn = document.querySelector('#getBtn')
    const postBtn = document.querySelector('#postBtn')
    const putBtn = document.querySelector('#putBtn')
    const deleteBtn = document.querySelector('#deleteBtn')
    //get查询请求
    getBtn.onclick = async function(){
      const p1 = await axios.get('/user',{
            params:{
                userId:'001'
            }
        })

        console.log(p1.data.data);
    }
    //删除请求 方式和get一样
    deleteBtn.onclick = async function(){
      const p2 = await axios.delete('/deleteUser',{
            params:{
                userId:'001'
            }
        })

        console.log(p2.data.data ,'删除成功');
    }
  

    //post新增请求
    postBtn.onclick = async function(){
        const p3 = await axios.post('/post',{
            name:'小a',
            age:18
        })
        console.log(p3.data.data ,'添加成功');
    }

    // put方式和post一样,修改数据
   putBtn.onclick = async function(){
        const p4 = await axios.put('/put',{
            name:'小C',
            age:20
        })
        console.log(p4.data.data ,'修改成功');
    }
  </script>
</body>
</html>